<template>
  <view>
    <view class="tab_nav">
      <view class="navTitle" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':current === index}" @click="checked(index)">
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="nav_item" v-if="current==0">
      <view class="nav_item1">
      	<view class="nav_item2">
      		<p>满10减2</p>
      		<p>有效期至2023.6.1</p>
      	</view>
		<view class="nav_item3">
			已使用
		</view>
      </view>
	  <view class="nav_item1">
	  	<view class="nav_item2">
	  		<p>满20减4</p>
	  		<p>有效期至2023.6.1</p>
	  	</view>
	  		<view class="nav_item3">
	  			已使用
	  		</view>
	  </view>
    </view>
    <view class="nav_item" v-if="current==1" >
      <view class="nav_item1">
      	<view class="nav_item2">
      		<p>满10减2</p>
      		<p>有效期至2023.6.1</p>
      	</view>
      		<view class="nav_item3">
      			未使用
      		</view>
      </view>
      <view class="nav_item1">
      	<view class="nav_item2">
      		<p>满10减2</p>
      		<p>有效期至2023.6.1</p>
      	</view>
      		<view class="nav_item3">
      			未使用
      		</view>
      </view>
    </view>
    <view class="nav_item" v-if="current==2">
      <view class="nav_item1">
      	<view class="nav_item2">
      		<p>满10减2</p>
      	</view>
      		<view class="nav_item3">
      			已过期
      		</view>
      </view>
      <view class="nav_item1">
      	<view class="nav_item2">
      		<p>满10减2</p>
      	</view>
      		<view class="nav_item3">
      			已过期
      		</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        current: 0,
        navList: [{
          index: 0,
          title: '已使用'
        }, {
          index: 1,
          title: "未使用"
        }, {
          index: 2,
          title: "已过期"
        }]
      }
    },
    methods: {
      checked(index) {
        this.current = index
      },
    }
  }
</script>
 
 
<style lang="less" scoped>
  .tab_nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .tab_nav .navTitle {
    height: 90rpx;
    line-height: 90rpx;
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    font-family: Alibaba PuHuiTi;
    color: #333;
  }
  .nav_item{
	  .nav_item1{
		  display: flex;
		  height:200rpx;
		  line-height: 60rpx;
		  background-color: aliceblue;
		  margin: 20rpx;
	  }
  }
 
  .active {
    position: relative;
    color: #1F75FE;
  }
 
  .active::after {
    content: "";
    position: absolute;
    width: 100rpx;
    height: 4rpx;
    background-color: #1F75FE;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }
</style>
 